#{meta /}

#{title '汉字'/}

#{stylesheet "characters/character-index.css"/}

#{body}

<div class="container">
	<div class="row">
		<div class="col-lg-2 col-sm-3 col-xs-6">
			<h3>汉字</h3>
			#{component.left-side-index indexes/}
		</div>
		<div class="col-lg-10 col-sm-9 col-xs-6">
			<div class="row">
				<div class="col-lg-12">
					<h3>${index}</h3>
				</div>
			</div>
			<hr/>
			#{list items:characterGroups, as:'group'}
				<div class="character-group">
					<div class="character-group-name">${group.name}</div>
					<div class="div-characters">
						#{list items:group.characters, as:'character'}
							<div class="div-character">
								<a class="character-header word-link" href="@{characters.CharacterDetail.index(character.id, request.url)}">
									<span class="character-jp font-jp">${character.jp}</span>
									<span class="character-cn">
										#{list items:character.cns, as:'cn'}
											${cn}
										#{/list}
									</span>
								</a>
								<div class="div-character-syllables">
									#{list items:character.syllables, as:'syllable'}
										<div class="syllable-value font-jp">${syllable.value}</div>
										<div class="div-syallable-words">
											#{list items:syllable.words, as:'word'}
												<li class="syllable-word">
													<span class="font-jp">${word.word}</span>
													<span>(<span class="font-jp">${word.syllable}</span>)</span>
												</li>
											#{/list}
										</div>
									#{/list}
								</div>
								<div class="div-fixwords">
									#{list items:character.fixwords, as:'word'}
										<div class="fixword">
											<span class="font-jp">${word.word}</span>
											<span>(<span class="font-jp">${word.syllable}</span>)</span>
										</div>
									#{/list}
								</div>
							</div>
						#{/list}
					</div>
				</div>
			#{/list}
			#{else}
				<p>（无）</p>
			#{/else}
		</div>
	</div>
</div>

#{/body}
